<template>
  <el-page-header @click="goback">
    <template #content>
      <span class="text-large font-600 mr-3">计件项目重审</span>
    </template>
  </el-page-header>
  <el-descriptions
    class="margin-top"
    style="
      border-radius: 10px;
      margin: 20px auto;
      width: 73%;
      box-shadow: 5px 5px 10px rgba(51, 126, 204, 0.5);
    "
    :column="3"
    size="large"
    border
  >
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <user />
          </el-icon>
          员工姓名
        </div>
      </template>
      {{ empName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <iphone />
          </el-icon>
          所属部门
        </div>
      </template>
      {{ deptName }}
    </el-descriptions-item>
    <el-descriptions-item label-class-name="my-label" class-name="my-content">
      <template #label>
        <div class="cell-item">
          <el-icon :style="iconStyle">
            <tickets />
          </el-icon>
          岗位
        </div>
      </template>
      {{ position }}
    </el-descriptions-item>
  </el-descriptions>
  <el-table
    :data="tableData"
    border
    style="
      width: 80%;
      margin: 20px auto;
      border-radius: 8px;
      box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);
    "
    :header-cell-style="{
      background: '#337ecc !important',
      color: '#ffffff',
      border: 'none !important',
    }"
  >
    <el-table-column prop="name" label="计件项目" />
    <el-table-column
      prop="empName"
      label="员工姓名"
      width="200"
    ></el-table-column>
	<el-table-column prop="targetNum" label="单价/￥"  width="200" />
    <el-table-column prop="workOrder" label="数量" width="200" />
    <el-table-column prop="quality" label="质量/%" width="200" />
	<el-table-column prop="difficulty" label="难度系数/%" />
	<el-table-column prop="total" label="总计" width="200" />
  </el-table>
  <div style="text-align: right;margin-right: 200px;margin-bottom: 20px;"> 总计：{{totalx}}</div>
  <el-button
    type="primary"
    @click="submitForm"
    class="button"
    style="margin-left: 20px"
    >重审通过</el-button
  >
</template>

<script setup>
import { ref, onBeforeMount, reactive, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { getOnePieceList } from "@/api/empPiece";
import { reAddPiece } from "@/api/resultFourth";
import { ElMessage } from "element-plus";

const route = useRoute();
let empId = route.query.empId;
let deptName = route.query.deptName;
let empName = route.query.empName;
let positionId = route.query.positionId;
let position = route.query.position;
let type = route.query.type;
var totalx =0;
const tableData = ref([]);
onBeforeMount(() => {
  let empId = route.query.empId;
  let positionId = route.query.positionId;
  getOnePieceList({ empId, positionId }).then((data) => {
	
	for(var i = 0 ;i<data.data.length;i++){
		data.data[i].total = parseFloat((data.data[i].workOrder*data.data[i].targetNum*data.data[i].quality*data.data[i].difficulty/10000).toFixed(2))
	}
	
	for(var i = 0 ;i<data.data.length;i++){
		totalx += data.data[i].total 
	}
	tableData.value = data.data
	totalx=totalx.toFixed(2)
  });
});

const { proxy } = getCurrentInstance();
const goback = () => {
  proxy.$router.go(-1);
};

const submitForm = () => {
  let assessorId = JSON.parse(localStorage.getItem("userInfo")).id;
  let empId = route.query.empId;
  let positionId = route.query.positionId;
  let positionType = route.query.type;
  reAddPiece({ empId, assessorId, positionId, positionType }).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "提交成功",
        type: "success",
      });
      goback();
    } else {
      ElMessage.error("提交失败");
    }
  });
};
</script>
<style scoped>
.button {
  width: 120px;
  height: 40px;
  margin: 10px 130px;
  float: right;
}
:deep(.my-label) {
  background: rgba(51, 126, 204, 0.2) !important;
  color: rgb(51, 126, 204) !important;
  border: #337ecc 2px solid !important ;
}
:deep(.my-content) {
  color: #fff !important;
  background: rgba(51, 126, 204, 0.9) !important;
  border: #337ecc 2px solid !important ;
}
</style>
